<template>
  <el-form class="base-search-more"
    label-position="right"
    label-width="110px"
    :model="params"
    :size="size">
    <el-row>
      <el-col :span="item.type === 'button' ? lastSpan : 6"
        v-for="(item, index) in config"
        :style="{ textAlign: item.type === 'button' ? 'right': 'left' }"
        :key="'config'+ index">

        <el-form-item v-if="item.type !== 'button'" :label="item.label">
          <agent-list v-if="item.type=== 'agentList'"
            style="width: 100%"
            :agentids="params[item.key]"
            :area="item.area"
            @listenToChildEvent="getAentId($event,item.key)" />

          <el-select v-if="item.type=== 'agentId'"
            style="width: 100%"
            @change="search"
            :placeholder="item.placeholder"
            :clearable ="!item.unClearable"
            v-model="params[item.key]">
            <el-option v-for="(list, sIndex) in restaurants"
              :label="list.name" :value="list.id"
              :key="list.name + sIndex" />
          </el-select>

          <el-select v-if="item.type=== 'select'"
            style="width: 100%"
            @change="search"
            :placeholder="item.placeholder"
            :clearable ="!item.unClearable"
            v-model="params[item.key]">

            <el-option v-for="(list, sIndex) in item.option"
              :label="list.label" :value="list.id"
              :key="list.label + sIndex" />
          </el-select>

          <pt-date-picker v-if="item.type === 'date'"
            @change="search"
            v-model="params[item.key]"
            :clearable="item.clearable"
            :disabledDate="time => time.getTime() <= (Date.now() - 3600 * 1000 * 24)" />

          <pt-date-picker v-if="item.type === 'beforeDate'"
            @change="search"
            v-model="params[item.key]"
            :clearable="item.clearable"
            :disabledDate="time => time.getTime() >= Date.now()" />


          <el-cascader v-if="item.type=== 'cascader'"
            style="width: 100%" expand-trigger="hover"
            clearable
            :options="item.classlist"
            @change="search"
            :show-all-levels="false"
            :placeholder="item.placeholder"
            v-model="params[item.key]"
            :props="item.classlistAlias" />

          <el-input v-if="item.type === 'input'"
            :placeholder="item.placeholder"
            :clearable ="!item.unClearable"
            @change="search"
            @keyup.enter.native="search"
            v-model="params[item.key]" />
        </el-form-item>

        <el-form-item v-if="item.type === 'button'" label-width="0">
          <template v-for="(btn, i) in item.group">
            <el-button
              :key="i"
              :type="btn.type" :size="btn.size || 'mini'" :icon="btn.icon"
              :disabled="btn.disabled"
              :plain="btn.plain"
              @click.stop="btn.onClick()"
            >{{btn.name}}</el-button>
          </template>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
  export default {
    components: {
      RenderDom: {
        functional: true, // 函数式组件 - 无 data 和 this 上下文 => better render
        props: {
          key: String,
          params: Object,
          render: Function
        },
        /**
         * @param {Function} createElement - 原生创建dom元素的方法， 弃用，推荐使用 jsx
         * @param {Object} ctx - 渲染的节点的this对象
         * @argument 传递参数 row index
         */
        render(createElement, ctx){
          const { params, key } = ctx.props
          return ctx.props.render(params, key)
        }
      }
    },
    props: {
      area: false, // 区域下拉框用 判断用无总区域含子区域 或 有总区域无子区域
      params: Object, // 参数
      config: Array, // 配置
      size: 'small' // 尺寸 见element-ui
    },
    computed: {
      userType() { // 賬戶裂隙
        return this.area ? this.$store.state.type === 1 : this.$store.state.showAgent
      },
      lastSpan() { // 計算搜索區域換行
        if (this.config) {
          const l = this.config.length - 1
          return (4 - (l + 4) % 4) * 6
        } else {
          return 24
        }
      },
      restaurants() { // 代理商列表
        return this.$store.state.agentList
      }
    },
    watch: {
      userType: {
        handler(val) { // 根据账号类型删去部分搜索按钮
          if (this.config && this.config.length) {
            const index = this.config.findIndex(item => {
              return item.type === 'agentList' || item.type === 'agent'
            })
            if (!val && index > -1) {
              this.config.splice(index, 1)
            }
          }
        }
      }
    },
    methods: {
      getAentId(item,key) {
        this.params[key] = item
        this.search()
      },
      search() {
        this.$emit('search')
      }
    }
  }
</script>

<style scoped>

</style>
